<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div align="center">
		<form name="f">
			<table>
				<caption>菜单查询</caption>
				<tr>
					<td>菜单名称：</td>
					<td><input type="text" name="menuName"></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="button" value="查询" onclick="query(0)"></td>
				</tr>
			</table>
		</form>
	</div>
	<hr>
	<div id="showTable"></div><!-- 用来显示查询的结果 -->
	<hr>
	<div align="center">
		<input type="button" id="firstButton" value="首页" onclick="query(1)">
		<input type="button" id="upButton" value="上一页" onclick="query(2)">
		<input type="button" id="nextButton" value="下一页" onclick="query(3)">
		<input type="button" id="lastButton" value="尾页" onclick="query(4)">
		每页显示的数据笔数：<select id="pageSize" onchange="query(5)">
			<option value="5" selected="selected">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
		</select>
		<span id="currentMessage"></span>
	</div>
</body>
<script type="text/javascript">
    var userId = "${userTable.user_id}";
	var pageSize = $("#pageSize").val();//每页显示数据笔数
	var pageCurrent = 1;//显示页码
	var allCount = 0;//数据笔数
	var allCurrent = 0;//数据页数
	query(0);
	function query(a){
		if(a == 0){
			pageCurrent = 1;
		}else if(a == 1){
			pageCurrent = 1;
		}else if(a == 2){
			pageCurrent = pageCurrent-1;
		}else if(a == 3){
			pageCurrent = pageCurrent+1;
		}else if(a == 4){
			pageCurrent = allCurrent;
		}else if(a == 5){
			pageSize = $("#pageSize").val();
			pageCurrent = 1;
		}
		var menuName = f.menuName.value;
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/MenuQueryByUserIdServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			data:{menuName:menuName,
				pageSize:pageSize,
				pageCurrent:pageCurrent,
				userId:userId},
			success:function(data){//data就是成功之后 Servlet返回的结果
				allCount = data[0].count;//取得数据笔数
				if(allCount%pageSize == 0){
					allCurrent = allCount/pageSize;
				}else{
					allCurrent =  parseInt(allCount/pageSize)+1;
				}
				$("#currentMessage").html("<font color='blue'>当前显示第"+pageCurrent+"页,共"+allCurrent+"页,"+allCount+"笔数据</font>");
				var str = "<table border='1' align='center'><tr><th>菜单ID</th><th>菜单名称</th><th>菜单描述</th><th>菜单状态</th><th>菜单路径</th><th>菜单等级</th></tr>";
				for(var i = 1;i<data.length;i++){
					str += "<tr><td>"+data[i].menuId+"</td><td>"+data[i].menuName+"</td><td>"+data[i].menuDescribe+"</td><td>"+data[i].menuState+"</td><td>"+data[i].menuUrl+"</td><td>"+data[i].menuLevel+"</td></tr>";
				}
				str += "</table>";
				$("#showTable").html(str);
				//如果当前显示页数为首页，则上一页以及首页不能使用
				if(pageCurrent == 1 && pageCurrent == allCurrent){
					$("#firstButton").attr({"disabled":"disabled"});
					$("#upButton").attr({"disabled":"disabled"});
					$("#nextButton").attr({"disabled":"disabled"});
					$("#lastButton").attr({"disabled":"disabled"});
				}else if(pageCurrent == 1){
					$("#firstButton").attr({"disabled":"disabled"});
					$("#upButton").attr({"disabled":"disabled"});
					$("#nextButton").removeAttr("disabled");
					$("#lastButton").removeAttr("disabled");
				}else if(pageCurrent == allCurrent){
					$("#nextButton").attr({"disabled":"disabled"});
					$("#lastButton").attr({"disabled":"disabled"});
					$("#firstButton").removeAttr("disabled");
					$("#upButton").removeAttr("disabled");
				}else{
					$("#firstButton").removeAttr("disabled");
					$("#upButton").removeAttr("disabled");
					$("#nextButton").removeAttr("disabled");
					$("#lastButton").removeAttr("disabled");
				}
			},
			error:function(err){
				alert("操作失败");
			}
		})
	}
</script>
</html>